<template>
	<view>
		<!-- <nav-bar></nav-bar> -->
		<swiper :duration="500" circular indicator-dots>
			<swiper-item v-for="(item, index) in swiperList" :key="index">
				<image style="width: 100%;height: 100%;" :src="item.image"></image>
			</swiper-item>
		</swiper>
		<view class="content-warp">
			<view class="content-warp-card" v-for="(item,index) in Flaglist" :key="index" @click="goToview(index)">
				<image style="width: 70rpx;height: 70rpx;float: right;" :src="item.like"></image>
				<view class="content-warp-title">{{item.title}}</view>
				<view class="content-warp-size">{{item.text}}</view>
				<view class="content-warp-card-text">{{item.jiud}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import navBar from '../../component/nav-bar.vue';
	export default {
		// components: {
		// 	navBar
		// },
		data() {
			return {
				swiperList: [{
						image: '../../static/images/ban1.png'
					},
					{
						image: '../../static/images/ban1.png'
					},
					{
						image: '../../static/images/ban1.png'
					}
				],
				Flaglist: [{
						is_like: false,
						jiud: '四季酒店',
						title:'标题',
						text:'引流内容'
					},
					{
						is_like: false,
						jiud: '四季酒店',
						title:'标题',
						text:'引流内容'
					},
					{
						is_like: false,
						jiud: '四季酒店',
						title:'标题',
						text:'引流内容'
					},
					{
						is_like: false,
						jiud: '四季酒店',
						title:'标题',
						text:'引流内容'
					},
				]
			}
		}
	}
</script>

<style scoped lang="scss">
	.content-warp {
		margin: 30rpx;
		height: 900rpx;
		display: flex;
		flex-wrap: wrap;
		/* 允许换行 */
		justify-content: space-between;

		&-card {
			width: 280rpx;
			height: 350rpx;
			border-radius: 30rpx;
			padding: 30rpx;

			&-text {
				margin-top: 40rpx;
				// border: 1rpx solid red;
				text-align: center;
				height: 50rpx;
				line-height: 50rpx;
				background-color: #347CAF;
				color: #ffffff;
			}
		}
		&-title{
			font-size: 30rpx;
			font-family: $uni-bg-color-hover;
			font-weight: 600;
		}
		&-size{
			margin: 20rpx 0;
			height: 150rpx;
		}
	}

	.content-warp-card:nth-of-type(1) {
		background-image: url('../../static/logo.png');
		background-position: center center;
		/* 背景图不平铺 */
		background-repeat: no-repeat;
		/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
		// background-attachment: fixed;
		/* 让背景图基于容器大小伸缩 */
		background-size: 100% 100%;
		/* 设置背景颜色，背景图加载过程中会显示背景色 */
		background-color: #464646;
	}

	.content-warp-card:nth-of-type(2) {
		background-image: url('../../static/logo.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-color: #464646;
	}

	.content-warp-card:nth-of-type(3) {
		background-image: url('../../static/logo.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-color: #464646;
	}

	.content-warp-card:nth-of-type(4) {
		background-image: url('../../static/logo.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-color: #464646;
	}
</style>